<template>
    <div class="login">
        <div class="login-con">
            <!-- 顶部切换 -->
            <ul class="menu-tab">
                <li v-for="item in menuData" :key="item.id" :class="{ current: item.current }" @click="clickMenu(item)">
                    {{ item.txt }}
                </li>
            </ul>

            <!-- 表单部分 -->
            <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm">
                <!-- 修改提示文字 并且修改type类型 与v-model绑定的数据 并且添加类名-->
                <el-form-item prop="username" class="item-from">
                    <label for="username">邮箱</label>
                    <el-input v-model="ruleForm.username" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item prop="password" class="item-from">
                    <label for="password">密码</label>
                    <el-input id="password" type="password" v-model="ruleForm.password" autocomplete="off" minlength="6"
                        maxlength="20"></el-input>
                </el-form-item>
                <el-form-item prop="passwords" class="item-from" v-show="model == 'register'">
                    <label>重复密码</label>
                    <el-input type="password" v-model="ruleForm.passwords" autocomplete="off" minlength="6"
                        maxlength="20"></el-input>
                </el-form-item>
                <!-- 设置按钮 -->
                <el-form-item>
                    <el-button type="danger" :disabled="btnbool" class="login-btn block"
                        @click.stop="submitForm(ruleFormRef)">{{ model == 'login' ? '登录' : '注册' }}</el-button>
                </el-form-item>
            </el-form>
            <!-- 表单部分 -->
        </div>
    </div>
</template>



<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
import useMd5 from '../../hooks/userMd5.js'

import link from '../../apis/axios.js'
import { verificationEmail, verificationPassword } from '../../util'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import router from '@/router';

//基础登录页配置
const menuData = reactive([
    { txt: '登录', current: true, type: 'login' },
    { txt: '注册', current: false, type: 'register' }
]);

const model = ref('login');

const clickMenu = (data: any) => {
    menuData.forEach((elem) => {
        elem.current = false
    });
    data.current = true
    model.value = data.type
}

//elm插件配置
const ruleFormRef = ref<FormInstance>();

const checkUser = (rule: any, value: any, callback: any) => {
    let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
    if (!value) {
        return callback(new Error('请输入正确的邮箱!'));
    } else if (!reg.test(value)) {
        return callback(new Error('请输入正确的邮箱!'));
    } else {
        callback();
    }
}
const validatePass = (rule: any, value: any, callback: any) => {
    let reg = /^(?!\D+$)(?![^a-zA-Z]+$)\S{6,15}$/;// 验证密码 6至15位的字母+数字
    if (value === "") {
        callback(new Error("请输入正确的密码！"));
    } else if (!reg.test(value)) {
        return callback(new Error("请输入正确的密码！"));
    } else {
        callback();
    }
};

const validatePass2 = (rule: any, value: any, callback: any) => {
    if (value === "") {
        callback(new Error("两次密码输入不一致！"));
    } else if (value !== ruleForm.password) {
        callback(new Error("两次密码输入不一致！"));
    } else {
        callback();
    }
};

const ruleForm = reactive({
    username: "",
    password: "",
    passwords: "",
});

let btnbool = ref(true)

watch(ruleForm, (newval) => {
    console.log(newval);
    if (model.value == 'login') {
        if (newval.username != '' && newval.password != '') {
            btnbool.value = false
        } else {
            btnbool.value = true
        }
    } else {
        if (newval.username != "" && newval.password != "" && newval.passwords != "") {
            btnbool.value = false
        } else {
            btnbool.value = true
        }
    }

})

const rules = reactive({
    password: [{
        validator: validatePass,
        trigger: 'blur'
    }],
    passwords: [{
        validator: validatePass2,
        trigger: 'blur'
    }],
    username: [{
        validator: checkUser,
        trigger: 'blur'
    }],
})


//注册功能实现
const submitForm = (formE1: FormInstance | undefined) => {
    if (!formE1) return;
    formE1.validate((valid) => {
        //判断是登录还是是注册
        if (valid) {
            if (model.value == "login") {
                console.log('登录');
                //登录请求发送
                link(`http://localhost:8089/register?uname=${ruleForm.username}&pwd=${ useMd5(ruleForm.password).value}`, 'get').then((ok:any) => {
                    let {data} = ok
                    if (data.length != 0) {
                        console.log('登录成功');
                        router.push('/home')
                    }else {
                        console.log('登录失败');
                    }
                })
            } else {
                //拼接要发送的数据
                let data = {
                    uname: ruleForm.username,
                    pwd: useMd5(ruleForm.password).value,
                }
                link("http://localhost:8089/register", 'POST', data).then((ok: any) => {
                    if (Object.keys(data).length !== 0) {
                        ElMessage("注册成功");
                        model.value = 'login'
                        menuData.forEach((elem) => {
                            elem.current = false;
                        });
                        // 在吧登录的编程true
                        menuData[0].current = true;
                    } else {
                        ElMessage.error("注册失败");
                    }
                })
            }
        } else {
            console.log('error submit');
            return false
        }
    })
}

const resetForm = (formE1: FormInstance | undefined) => {
    if (!formE1) return;
    formE1.resetFields()
}



</script>



<style lang="scss">
.login {
    background-color: #000066; //深蓝色
    height: 100%;
}

html,
body,
 #app {
    //设置页面100%高
    height: 100%;
}

.login-wrap {
    width: 330px;
    margin: auto;
}

.menu-tab {
    text-align: center;

    li {
        display: inline-block;
        width: 88px;
        line-height: 36px;
        font-size: 14px;
        color: #fff;
        border-radius: 2px;
        cursor: pointer;
    }

    .current {
        background-color: rgba(255, 255, 255, 0.5); //白色半透明
    }
}

.demo-ruleForm {
    width: 30%;
    margin: 50px auto;

    label {
        display: block;
        margin-bottom: 3px;
        font-size: 14px;
        color: #fff;
    }

    .item-from {
        margin-bottom: 13px;
    }

    .block {
        display: block;
        width: 100%;
    }

    .login-btn {
        margin-top: 19px;
    }
}
</style>